<template>
  <div id='tmpl'>
<!--1.0评论组件  -->
    <div id='postcomment'>
        <h3>提交评论</h3>
        <p></p>
        <textarea placeholder="请输入您要评论的内容…" v-model="postcontent"></textarea>
        <mt-button type='primary' size='large' @click='postcomment'>发表</mt-button>
    </div>


<!-- 2.0实现获取评论数据列表 -->
    <div id="list">
        <h3>评论列表</h3>
        <p class="p"></p>
        <div v-for="(item,index) in list">
            <div class="title">
                <span>第{{index + 1}}楼:</span>
                <span>用户:{{item.user_name}}</span>
                <span>发表时间:{{item.add_time|datefmt('YYYY-MM-DD hh:mm:ss')}}</span>
            </div>
			<ul class="mui-table-view">
				 <li class="mui-table-view-cell" v-text ="item.content"></li> 
			</ul>
        </div>
    </div>
<!--3.0 实现获取更多按钮 -->
    <mt-button type='primary' size='large' plain @click='getmore'>加载更多</mt-button>
  </div>
</template>
<script>
import common from '../../kits/common.js';
import {Toast} from "mint-ui";
export default {
        data(){
            return{
                pageindex:1,        //代表获取api中的第几页评论数据 默认值是1
                postcontent:'',   //用来自动获取用户填写的评论内容
                list:[]    //评论数据的数组
            }
        },
        props:['id'], //作用是用来接收父组件传入过来的id值
        created(){
        
            this.getcommentlist(this.pageindex);
        },
        methods:{
            //3.0 实现加载更多方法
            getmore(){
                //实现this.pageindex的+1
                this.pageindex++;
                //2.0 获取当前this.pageindex值对应的分页数据
                this.getcommentlist(this.pageindex);
            },
            // 2.0 获取当前内容的评论数据 pageindex代表的是当前获取的是哪一页的数据 默认值是1
            getcommentlist(pageindex){
                pageindex = pageindex || 1;
                // 2.1.0 确定评论数据的url
                var url = common.apidomain + "/api/getcomments/"+this.id+"?pageindex="+pageindex;
                // 2.2.0 发出ajax请求获取数据
                this.$http.get(url).then(function(res){
                        if(res.body.status != 0){
                            Toast(res.body.message);
                            return
                        }
                // 2.3.0  / 3.0
                this.list = this.list.concat(res.body.message);  //将res.body.message追加到list的后面  而下面的评论发布后 list在括号里  内容在前面 就是追加到list的前面
                })
            },
            // 1.0 评论数据的提交
            postcomment(){
                //判断用户是否有填写评论内容
                if(this.postcontent.trim().length <=0){
                     Toast("请输入您要评论的内容");
                     return
                }
                //确定提交的地址
                var url = common.apidomain + "/api/postcomment/"+this.id;
                //获取到用户在文本框中填写的评论内容，通过content：内容 格式提交到请求报文体中
                this.$http.post(url,{content:this.postcontent},{emulateJSON:true}).then(function(res){
                    Toast(res.body.message);
                    // 3.0 将最新的评论数据追加到评论列表的最顶部
                    this.list = [{
                        "user_name": "匿名用户",
                        "add_time": new Date(),
                        "content":this.postcontent
                    }].concat(this.list);  //将最新的内容追加到之前的list里 然后返回一个新的数组给list
                    
                     //4.0内容提交成功后 将文本框中的评论内容清空
                    this.postcontent = "";
                })    
            }
        }
    }
</script>
<style lang="css" scoped>
#postcomment{
	padding: 5px;
}
	 .p{
		height: 1px;
		width: 100%;
		border-bottom: 1px solid rgba(0,0,0,0.3);
	}

	/*2.0 评论列表的样式*/
#list{
	padding: 5px;
}
.title{
	padding: 5px;
	color: #6d6d72;
	font-size: 15px;
	background-color: rgba(0,0,0,0.1);
}
</style>